import React, { Component } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper/core';
import { getBanner, getTuijiangedan, getTuijianmv, getTuijiansong } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import 'swiper/swiper.min.css';
import '../../style/swiperAlter.css';
import '../../style/all.css';
import './Faxianmusic.css';
SwiperCore.use([Autoplay]);

export default class Faxianmusic extends Component {
	state = {
		bannerList: [],
		tuijiangedanList: [],
		tuijianmvList: [],
		tuijiansongList: []
	}
	async componentDidMount () {
		const banner = await getBanner();
		const tuijiangedan = await getTuijiangedan(15);
		const tuijianmv = await getTuijianmv();
		const tuijiansong = await getTuijiansong();
		this.setState({
			bannerList: banner.banners,
			tuijiangedanList: tuijiangedan.result,
			tuijianmvList: tuijianmv.result,
			tuijiansongList: tuijiansong.result,
		})
	}
	render () {
		let { bannerList, tuijiangedanList, tuijianmvList, tuijiansongList } = this.state;
		return (
			<div className='music main'>
				<div className='faxianbanner'>
					<Swiper
						spaceBetween={-30}
						slidesPerView={2}
						autoplay={{ delay: 1500, disableOnInteraction: false }}
						centeredSlides
						loop
					>
						{bannerList.map((item) => (
							<SwiperSlide key={item.scm} className='swiper-slide'>
								<a href="https://music.163.com/#/download" rel='noreferrer' target='_blank' className='link'>
									<img width='100%' height='100%' src={item.imageUrl} alt="" />
									<span>{item.typeTitle}</span>
								</a>
							</SwiperSlide>
						))}
					</Swiper>
				</div>
				<div className='first'>
					<div className='first_title'>
						<h2>推荐歌单</h2>
						<span className='red' onClick={() => { this.props.history.push('/tuijiangedan'); }}>查看更多</span>
					</div>
					<div className='first_box'>
						<ul className='f_music_box'>
							{tuijiangedanList.map((item) => (
								<li className='perse20' key={item.id} onClick={() => { this.props.history.push(`/gedandetail?id=${item.id}`); }}>
									<div className='img tophover'>
										<img width='100%' height='100%' src={item.picUrl} alt="" />
										<div className='gd_mv_hover'></div>
									</div>
									<p>{item.name}</p>
								</li>
							))}
						</ul>
					</div>
				</div>
				<div className='second'>
					<div className='second_title'>
						<h2>推荐MV</h2>
						<span className='red' onClick={() => { this.props.history.push('/zuixinmv'); }}>查看更多</span>
					</div>
					<div className='second_box'>
						<ul className='s_mv_box'>
							{tuijianmvList.map((item) => (
								<li className='perse25' key={item.id} onClick={() => { this.props.history.push(`/mvdetail?id=${item.id}`); }}>
									<div className='img tophover'>
										<img width='100%' height='100%' src={item.picUrl} alt="" />
										<div className='gd_mv_hover'></div>
									</div>
									<p>{item.name}<br /><span>{item.artistName}</span></p>
								</li>
							))}
						</ul>
					</div>
				</div>
				<div className='third'>
					<div className='third_title'>
						<h2>最新歌曲</h2>
						<span className='red' onClick={() => { this.props.history.push('/zuixinsong'); }}>查看更多</span>
					</div>
					<div className='third_box'>
						<ul className='t_song_box'>
							{tuijiansongList.map((item) => {
								return (
									<li key={item.id} onClick={() => { bus.emit('syplay', { id: item.id, duration: item.song.duration, name: item.name, artist: item.song.artists[0].name }) }}>
										<div className='img'>
											<img width='100%' height='100%' src={item.picUrl} alt="" />
											<div className='song_hover'></div>
										</div>
										<p>{item.name} <br />
											<span>{item.song.artists[0].name} &nbsp;</span>
										</p>
									</li>
								)
							})}
						</ul>
					</div>
				</div>
			</div>
		)
	}
}
